<nav id="sidebar" class="sidebar perfect-scrollbar-transparent" [ngClass]="{ 'sidebar-bg': hasBackgroundImage() }" [style]="style">
  <div class="sidebar-content">
    <perfect-scrollbar class="transparent">
      <div class="sidebar-header">
        <a href="#">Keira3 Database Editor</a>
      </div>

      <div class="sidebar-profile">
        <div class="user-pic">
          <img class="img-responsive img-rounded" [src]="'assets/img/ac.png'" alt="User picture" />
        </div>
        <div class="user-info" *ngIf="mysqlService.config">
          <span class="db-user">
            <strong>{{ mysqlService.config.user }}</strong>
          </span>
          <span class="db-host">
            <strong
              >{{ mysqlService.config.host }}<span class="port">:{{ mysqlService.config.port }}</span></strong
            >
          </span>
          <span class="db-name">
            <strong
              ><i>{{ mysqlService.config.database }}</i></strong
            >
          </span>
          <span class="user-status">
            <i class="fa fa-circle connection-status" [ngClass]="mysqlService.getConnectionState()"></i>
            <span>{{ mysqlService.getConnectionState() | titlecase }}</span>
          </span>
          <span>
            <keira-logout-btn></keira-logout-btn>
          </span>
        </div>
      </div>

      <div class="sidebar-menu">
        <ul>
          <li>
            <a id="dashboard-toggle" href="#" [routerLink]="''"> <i class="fa fa-tachometer-alt"></i> Dashboard </a>
          </li>

          <li>
            <a id="sql-editor-toggle" href="#" [routerLink]="'sql-editor'"> <i class="fa fa-code"></i> SQL Editor </a>
          </li>

          <li>
            <a id="collapse-all" (click)="collapseAll()"> <i class="fas fa-angle-double-up"></i> Collapse All </a>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.creature === 'down' }">
            <a id="creature-editor-toggle" (click)="toggleState('creature')">
              <i class="fa fa-dragon"></i>
              <span>Creature</span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates.creature">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'creature/select'"> Select Creature </a>
                </li>
                <ng-container *ngIf="creatureHandlerService.selected">
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template'">
                      Creature Template <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureTemplateUnsaved"></keira-unsaved-icon>
                    </a>
                  </li>
                  <ng-container *ngIf="!creatureHandlerService.isNew">
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template-addon'">
                        Template Addon
                        <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureTemplateAddonUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template-resistance'">
                        Template Resistance
                        <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureTemplateResistanceUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-template-spell'">
                        Template Spell
                        <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureTemplateSpellUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-onkill-reputation'">
                        Onkill Reputation
                        <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureOnkillReputationUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-equip-template'">
                        Equip Template
                        <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureEquipTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/npc-vendor'">
                        Vendor <keira-unsaved-icon *ngIf="creatureHandlerService.isNpcVendorUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/npc-trainer'">
                        Trainer <keira-unsaved-icon *ngIf="creatureHandlerService.isNpcTrainerUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-questitem'">
                        Quest Item <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureQuestitemUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-loot-template'">
                        Creature Loot <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureLootTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/pickpocketing-loot-template'">
                        Pickpocketing Loot
                        <keira-unsaved-icon *ngIf="creatureHandlerService.isPickpocketingLootTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/skinning-loot-template'">
                        Skinning Loot <keira-unsaved-icon *ngIf="creatureHandlerService.isSkinningLootTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-spawn'">
                        Spawn <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureSpawnUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/creature-spawn-addon'">
                        Spawn Addon <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureSpawnAddonUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'creature/sai-creature'">
                        SmartAI <keira-unsaved-icon *ngIf="creatureHandlerService.isCreatureSaiUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                  </ng-container>
                </ng-container>
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.quest === 'down' }">
            <a (click)="toggleState('quest')">
              <i class="fa fa-scroll"></i>
              <span>Quest</span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates.quest">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'quest/select'"> Select Quest </a>
                </li>
                <ng-container *ngIf="questHandlerService.selected">
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-template'">
                      Quest Template <keira-unsaved-icon *ngIf="questHandlerService.isQuestTemplateUnsaved"></keira-unsaved-icon>
                    </a>
                  </li>
                  <ng-container *ngIf="!questHandlerService.isNew">
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-template-addon'">
                        Quest Template Addon
                        <keira-unsaved-icon *ngIf="questHandlerService.isQuestTemplateAddonUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-offer-reward'">
                        Quest Offer Reward <keira-unsaved-icon *ngIf="questHandlerService.isQuestOfferRewardUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/quest-request-items'">
                        Quest Request Items <keira-unsaved-icon *ngIf="questHandlerService.isQuestRequestItemsUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/creature-queststarter'">
                        Creature Queststarter
                        <keira-unsaved-icon *ngIf="questHandlerService.isCreatureQueststarterUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/creature-questender'">
                        Creature Questender
                        <keira-unsaved-icon *ngIf="questHandlerService.isCreatureQuestenderUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/gameobject-queststarter'">
                        Gameobject Queststarter
                        <keira-unsaved-icon *ngIf="questHandlerService.isGameobjectQueststarterUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'quest/gameobject-questender'">
                        Gameobject Questender
                        <keira-unsaved-icon *ngIf="questHandlerService.isGameobjectQuestenderUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                  </ng-container>
                </ng-container>
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.gameobject === 'down' }">
            <a (click)="toggleState('gameobject')">
              <i class="fa fa-dungeon"></i>
              <span>GameObject</span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates.gameobject">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'gameobject/select'"> Select Gameobject </a>
                </li>
                <ng-container *ngIf="gameobjectHandlerService.selected">
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-template'">
                      Gameobject Template
                      <keira-unsaved-icon *ngIf="gameobjectHandlerService.isGameobjectTemplateUnsaved"></keira-unsaved-icon>
                    </a>
                  </li>
                  <ng-container *ngIf="!gameobjectHandlerService.isNew">
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-template-addon'">
                        Template Addon
                        <keira-unsaved-icon *ngIf="gameobjectHandlerService.isGameobjectTemplateAddonUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-questitem'">
                        Quest Items <keira-unsaved-icon *ngIf="gameobjectHandlerService.isGameobjectQuestitemUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-loot-template'">
                        Gameobject Loot
                        <keira-unsaved-icon *ngIf="gameobjectHandlerService.isGameobjectLooTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-spawn'">
                        Spawn <keira-unsaved-icon *ngIf="gameobjectHandlerService.isGameobjectSpawnUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/gameobject-spawn-addon'">
                        Spawn Addon <keira-unsaved-icon *ngIf="gameobjectHandlerService.isGameobjectSpawnAddonUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gameobject/sai-gameobject'">
                        SmartAI <keira-unsaved-icon *ngIf="gameobjectHandlerService.isGameobjectSaiUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                  </ng-container>
                </ng-container>
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.item === 'down' }">
            <a (click)="toggleState('item')">
              <i class="fa fa-gavel"></i>
              <span>Item</span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates.item">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'item/select'"> Select Item </a>
                </li>
                <ng-container *ngIf="itemHandlerService.selected">
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'item/item-template'">
                      Item Template <keira-unsaved-icon *ngIf="itemHandlerService.isItemTemplateUnsaved"></keira-unsaved-icon>
                    </a>
                  </li>
                  <ng-container *ngIf="!itemHandlerService.isNew">
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/item-enchantment-template'">
                        Enchantment Template <keira-unsaved-icon *ngIf="itemHandlerService.isItemEnchantmentUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/item-loot-template'">
                        Item Loot <keira-unsaved-icon *ngIf="itemHandlerService.isItemLootTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/disenchant-loot-template'">
                        Disenchant Loot
                        <keira-unsaved-icon *ngIf="itemHandlerService.isDisenchantmentLootTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/prospecting-loot-template'">
                        Prospecting Loot
                        <keira-unsaved-icon *ngIf="itemHandlerService.isProspectingLootTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'item/milling-loot-template'">
                        Milling Loot <keira-unsaved-icon *ngIf="itemHandlerService.isMillingLootTemplateUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                  </ng-container>
                </ng-container>
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.otherLoot === 'down' }">
            <a (click)="toggleState('otherLoot')">
              <i class="fa fa-coins"></i>
              <span>Other Loots</span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates.otherLoot">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/select-reference'"> Select Reference Loot </a>
                </li>
                <li *ngIf="referenceLootHandlerService.selected">
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/reference'">
                    Reference Loot Template <keira-unsaved-icon *ngIf="spellLootHandlerService.isUnsaved"></keira-unsaved-icon>
                  </a>
                </li>
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/select-spell'"> Select Spell Loot </a>
                </li>
                <li *ngIf="spellLootHandlerService.selected">
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/spell'">
                    Spell Loot Template <keira-unsaved-icon *ngIf="spellLootHandlerService.isUnsaved"></keira-unsaved-icon>
                  </a>
                </li>
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/select-fishing'"> Select Fishing Loot </a>
                </li>
                <li *ngIf="fishingLootHandlerService.selected">
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/fishing'">
                    Fishing Loot Template <keira-unsaved-icon *ngIf="fishingLootHandlerService.isUnsaved"></keira-unsaved-icon>
                  </a>
                </li>
                <hr />
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/select-mail'"> Select Mail Loot </a>
                </li>
                <li *ngIf="mailLootHandlerService.selected">
                  <a href="#" routerLinkActive="active" [routerLink]="'other-loots/mail'">
                    Mail Loot Template <keira-unsaved-icon *ngIf="mailLootHandlerService.isUnsaved"></keira-unsaved-icon>
                  </a>
                </li>
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.gossip === 'down' }">
            <a (click)="toggleState('gossip')">
              <i class="fa fa-comments"></i>
              <span>Gossip</span>
            </a>
            <div class="sidebar-submenu" [@slide]="menuStates.gossip">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'gossip/select'"> Select Gossip Menu </a>
                </li>
                <ng-container *ngIf="gossipHandlerService.selected">
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'gossip/gossip-menu'">
                      Gossip Menu <keira-unsaved-icon *ngIf="gossipHandlerService.isGossipMenuTableUnsaved"></keira-unsaved-icon>
                    </a>
                  </li>
                  <ng-container *ngIf="!gossipHandlerService.isNew">
                    <li>
                      <a href="#" routerLinkActive="active" [routerLink]="'gossip/gossip-menu-option'">
                        Gossip Menu Option
                        <keira-unsaved-icon *ngIf="gossipHandlerService.isGossipMenuOptionTableUnsaved"></keira-unsaved-icon>
                      </a>
                    </li>
                  </ng-container>
                </ng-container>
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.conditions === 'down' }">
            <a (click)="toggleState('conditions')">
              <i class="fas fa-sort-amount-up"></i>
              <span>Conditions</span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates.conditions">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'conditions/select'"> Select Conditions </a>
                </li>
                <ng-container *ngIf="conditionsHandlerService.selected">
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'conditions/conditions'">
                      Conditions <keira-unsaved-icon *ngIf="conditionsHandlerService.isConditionsUnsaved"></keira-unsaved-icon>
                    </a>
                  </li>
                </ng-container>
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.smartAi === 'down' }">
            <a (click)="toggleState('smartAi')">
              <i class="fa fa-lightbulb"></i>
              <span>SmartAI</span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates.smartAi">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'smart-ai/search-existing'"> Search by existing SAI </a>
                </li>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'smart-ai/search-entity'"> Search by entity </a>
                </li>
                <ng-container *ngIf="saiHandlerService.selected">
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'smart-ai/editors'">
                      SmartAI editor <keira-unsaved-icon *ngIf="saiHandlerService.isSaiUnsaved"></keira-unsaved-icon>
                    </a>
                  </li>
                </ng-container>
              </ul>
            </div>
          </li>

          <li class="sidebar-dropdown" [ngClass]="{ active: menuStates.spell === 'down' }">
            <a (click)="toggleState('spell')">
              <i class="fa fa-magic"></i>
              <span>Spell DBC overrides</span>
            </a>

            <div class="sidebar-submenu" [@slide]="menuStates.spell">
              <ul>
                <li>
                  <a href="#" routerLinkActive="active" [routerLink]="'spell/select'"> Search Spell </a>
                </li>
                <ng-container *ngIf="spellHandlerService.selected">
                  <li>
                    <a href="#" routerLinkActive="active" [routerLink]="'spell/spell-dbc'">
                      Spell DBC editor <keira-unsaved-icon *ngIf="spellHandlerService.isSpellDbcUnsaved"></keira-unsaved-icon>
                    </a>
                  </li>
                </ng-container>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </perfect-scrollbar>
  </div>

  <button class="btn btn-secondary btn-sm sidebar-button" (click)="toggleSidebar()">
    <i class="fas {{ getSideBarState() ? 'fa-angle-double-right' : 'fa-angle-double-left' }}"></i>
  </button>
</nav>
